<script setup lang="ts">
import { ref,onMounted,onUpdated } from 'vue'
import { create, createReportList } from './modules/canvas.js';
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
import randomSquare from './modules/square.js';

let isShow = ref(false);

function showCanvas(){
    let myCanvas = create('myCanvas', document.querySelector("#basic-modules-root"), 480, 320);
    let reportList = createReportList(myCanvas.id);

    let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
    reportArea(square1.length, reportList);
    reportPerimeter(square1.length, reportList);

    // Use the default
    let square2 = randomSquare(myCanvas.ctx);

}

onMounted(()=>{
    if(isShow.value==true){
        showCanvas();
    }
})

onUpdated(()=>{
    if(isShow.value==true){
        showCanvas();
    }
})

</script>

<template>
    <div class="hide"><input type="button" :value="`${isShow ? 'hide' : 'show'} BasicModules`" @click="isShow = !isShow"></div>
    <div v-if="isShow">
        <div>Basic JavaScript module example</div>
        <div id="basic-modules-root"></div>
    </div>
</template>

<style scoped>
canvas {
        border: 1px solid black;
      }
</style>